<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="UTF-8">
<title>CSS属性练习</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>
<style type="text/css">
body, div {
	padding: 10px
}

div {
	border: 1px solid #777;
}

body>div:nth-child(1) {
	float: left;
	width: 50%;
	height: 100%;
	overflow: auto
}

body>div:nth-child(2) {
	float: right;
	width: 45%;
	height: 100%;
	overflow: auto
}
li{
	padding: 2px
}
li:hover{
	background-color: #888;
	color: #fff;
}
li>*:nth-child(2),li>*:nth-child(3){
	float: right;
}
li>span{
	width:40%;
}
li>input{
	width:50%
}
h1{
	background-color: #eee;
}
#f1 div{
	width:85px;
	height:85px;
	line-height:85px;
	text-align: center;
	vertical-align: middle;
	display: inline-block;
	padding: 0px;
	margin: 5px
	
}
</style>
</head>
<body style="height: 90%">
	<div>
		<h1>背景偏移</h1>
		<fieldset id="f1">
			<legend>案例效果</legend>
			<div v-for="i in 10">DIV</div>
		</fieldset>
		<fieldset id="f2">
			<legend>资源图片:82-81.jpg, 每个小图片大小是82*81</legend>
			<img alt="" src="82-81.jpg" style="border: 1px #666 solid;">
		</fieldset>
	</div>
	<div id="lx">
		<h2>请查看左下的图片, 根据要求在DIV中显示不同的狗</h2>
		<p style="text-align: center; color: #777">参考代码格式 : background: url(图片) x坐标  y坐标
		<ol>
			<li v-for="(q,index) in qlist">
				<span>{{q.name}}</span>: 
				<img v-bind:style="q" src="OK.png" width="20px" >
				<input v-bind:answer="q.answer" placeholder="请填选择器，例：#test"
					v-on:click="a(q)" 
					v-on:change="answer(q)">
			</li>
		</ol>
	</div>	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	<script type="text/javascript">
		function Q(name, answer, selector, msg) {
			this.name = name;
			this.answer = answer;
			this.selector = selector;
			this.msg = msg;
			this.visibility = 'hidden';
		}
		function q(name, answer, selector, msg) {
			return new Q(name, answer, selector, msg);
		}
		var qlist = [ 
			q('戴帽子的二哈', 'background: url(82-81.jpg) -82px -81px','#f1 :nth-child(2)'),
			q('右下角那只狗', 'background: url(82-81.jpg) -246px -405px','#f1 :nth-child(3)'),
			q('杯子中的小狗', 'background: url(82-81.jpg) -82px -405px','#f1 :nth-child(4)'),
			q('右上角那只狗', 'background: url(82-81.jpg) -246px 0px','#f1 :nth-child(5)'),
			q('转呼啦圈的狗', 'background: url(82-81.jpg) -164px -81px','#f1 :nth-child(6)'),
			q('吊着骨头的狗', 'background: url(82-81.jpg) 0px -405px','#f1 :nth-child(7)'),
			q('没有眼睛的狗', 'background: url(82-81.jpg) -246px -243px','#f1 :nth-child(8)'),
			q('举哑铃的狗', 'background: url(82-81.jpg) -82px 0px','#f1 :nth-child(9)'),
			q('职业假笑的狗', 'background: url(82-81.jpg) -82px -243px','#f1 :nth-child(10)'),
			q('四个惊叹号的狗', 'background: url(82-81.jpg) 0px -243px','#f1 :nth-child(11)'),
				];
		qlist.sort((a,b)=>{return Math.random()>.5 ? -1 : 1});

		var lx = new Vue({
			el : '#lx',
			data : {
				qlist : qlist,
			},
			methods : {
				answer : function(q) {
					if (event.srcElement.value) {
						var a1 = event.srcElement.value;
						var a2 = q.answer;
						var arr = a1.split(":");
						$(q.selector).css(arr[0], arr[1]);
						a1 = a1.replace(/\s+/g, '');
						a2 = a2.replace(/\s+/g, '');
						a1 = a1.toLowerCase();
						a2 = a2.toLowerCase();
						q.visibility = a1 == a2 ? 'visible' : 'hidden';
						if (a1 == a2 && q.msg) {
							alert(q.msg);
						}
					}
				},
				a : function(q) {
					if (event.altKey) {
						event.srcElement.value = q.answer;
						this.$options.methods.answer(q);
					}
				}
			}
		});
		var f1 = new Vue({
			el : '#f1'
		});
	</script>
</body>
</html>